<template>
  <div class="BlogPage">
    <div class="background">
      <div class="search">
      <h3>搜索</h3>
      <el-row>
        <el-col>
        <el-input placeholder="搜你想搜" v-model="blogTitle">
          <el-button slot="append" icon="el-icon-search" @click="search">搜索</el-button>
        </el-input>
        </el-col>
      </el-row>
      </div>
    </div>
    <div class="BlogList">
      <div v-for="b in blogList.slice((currentPage - 1) * pageSize, currentPage * pageSize)" 
      :key="b.blogId" :xs="24" v-loading="loading" >
        <h3 @click="getBlog(b.blogId)" >{{b.title}}</h3>
        <hr style="margin:20px 0px;">
        <p>
          <img v-show="b.blogCover" :src="b.blogCover" class="img"/>
          {{b.content.substring(0,150)}}
        </p>
        <p>
          <a @click="getBlog(b.blogId)">继续阅读</a>
        </p>
        <p class="info">
          <span>作者：{{b.userName}}</span>
          {{b.creationDate.substring(0,11)}}
        </p>
      </div>
    </div>
    <el-pagination
      layout="total, prev, pager, next,jumper"
      :total="total"
      @size-change="handleSizeChange"
      :current-page="currentPage"
      :page-size="pageSize"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: "BlogPage",
  data() {
    return {
      blogList:[],
      loading: true,
      currentPage: 1, //当前页数
      pageSize: 10, //当前页记录数
      total: 0, //总条数
      blogTitle:'',
      isCover:true,
      imgstyle:''
    };
  },
  methods: {
    loadBlogList() {
      this.axios.get("/blog/blogList/0").then((res) => {
        this.blogList = res.data.blogList;
        this.loading = false;
        this.total = this.blogList.length;
        this.blogList.forEach(element => {
          if(element.blogCover!=null && element.blogCover!=""){
            element.blogCover = this.axios.defaults.baseURL+"/"+element.blogCover;
          }
        });
      });
    },
    preview(row) {
      this.$router.push("./BlogDetail/" + row.blogId);
    },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    getBlog(id){
      this.$router.push("./blogDetail/" + id);
    },
    search() {
      if (this.blogTitle == "") {
        this.$message.info("请输入你想查找的Blog");
        this.loadBlogList();
      } else {
        let form = new FormData();
        form.append("title", this.blogTitle);
        this.axios.post("/blog/search", form).then((res) => {
          if (res.data.success) {
            this.blogList = res.data.data;
            this.blogList.forEach(element => {
            if(element.blogCover!=null && element.blogCover!=""){
              element.blogCover = this.axios.defaults.baseURL+"/"+element.blogCover;
            }});
            this.total = this.blogList.length;
            this.$message.success(res.data.msg);
            this.loading = false;
          } else {
            this.$message.error(res.data.msg);
          }
        });
      }
    }
  },
  created() {
    this.loadBlogList();
  },
};
</script>

<style>
.background {
  height: 400px;
  background: url("../../static/image/img.jpg");
  opacity: 0.8;
  color: white;
  position: relative;
}
.background .search{
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: 70%;
}

.background .search h3{
  font-size: 40px;
  letter-spacing: 1ch;
  font-weight: 500;
  color: rgb(255, 255, 255);
  text-align: center;
  margin-bottom: 20px;
}

.BlogPage .BlogList div{
  width: 70%;
  margin: 60px auto;
  color: #303030;
  position: relative;
}
.BlogPage .BlogList div h3{
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 1px;
}

.BlogPage .BlogList div h3:hover{
  color: #1279c4;
  cursor: pointer;
}

.BlogPage .BlogList div P{
 margin: 10px 0px 20px 0px; 
}

.BlogPage .el-pagination{
  width: 70%;
  text-align: center;
  margin: 20px auto;
}
.BlogPage a{
  text-decoration: underline;
  font-size: 15px;
}

.BlogPage a:hover{
  cursor: pointer;
  color: rgb(117, 109, 109);
}

.BlogList div .info{
 font-size: 15px;
 color: rgb(161, 167, 173);
}

.BlogList div .info span{
  margin-right: 20px;
}
.BlogList .img{
  width: 200px;
  height: 130px;
  float: left;
  margin: 0px 30px 0px 0px;
}

</style>